<template>
  <div class="my-form-item">
    <label
      :style="{ width: mylabelWidth }"
      v-if="label"
      class="my-form-item__label"
      >{{ label }}</label
    >
    <div class="my-form-item__content" :style="{'margin-left': mylabelWidth}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-form-item',
  inject: ['formLabelWidth'],
  props: {
    label: {
      type: String
    },
    'label-width': {
      type: String
      // default: '80px'
    }
  },
  computed: {
    mylabelWidth () {
      // 自己有值,用自己的
      if (this.labelWidth) {
        return this.labelWidth
      }
      // 自己没有值,判断父组件有没有值
      // if (this.$parent.labelWidth) {
      //   return this.$parent.labelWidth
      // }
      // 自己没有,判断祖先有没有,祖先有,就用祖先的
      // 做一次传值的优化配置
      if (this.formLabelWidth) {
        return this.formLabelWidth
      }
      // 自己没有值, 父组件也没有值 返回默认值 80
      return '80px'
    }
  },
  created () {
    // 获取父组件中的label-width
    console.log('父组件中的:', this.$parent.labelWidth)
    console.log('自己的:', this.labelWidth)
    console.log('祖先传递过来的:', this.formLabelWidth)
  }
}
</script>

<style lang="less">
.my-form-item {
  margin-bottom: 22px;
  &::before {
    display: table;
    content: '';
  }
  // 文本
  .my-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
  }
  // 内容
  .my-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    &::before {
      display: table;
      content: '';
    }
  }
}
</style>
